<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<base href="/resources/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>impress.js | presentation tool based on the power of CSS3
	transforms and transitions in modern browsers | by Bartek Szopka
	@bartaz</title>

<meta name="description"
	content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
<meta name="author" content="Bartek Szopka" />

<link
	href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic"
	rel="stylesheet" />

<link href="css/impress-demo.css" rel="stylesheet" />

<link rel="shortcut icon" href="image/favicon.png" />
<link rel="apple-touch-icon" href="image/apple-touch-icon.png" />
</head>

<body class="impress-not-supported">

	<!--
    For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
	<div class="fallback-message">
		<p>
			Your browser <b>doesn't support the features required</b> by
			impress.js, so you are presented with a simplified version of this
			presentation.
		</p>
		<p>
			For the best experience please use the latest <b>Chrome</b>, <b>Safari</b>
			or <b>Firefox</b> browser.
		</p>
	</div><p>

	<div id="impress">

		<%-- <c:forEach var="preziList" items="${preziList }">
			<div id="" class="${preziList.className }"
				data-x="${preziList.data_x }" data-y="${preziList.data_y }"
				data-z="${preziList.data_z }"
				data-rotate-x="${preziList.data_rotate_x }"
				data-rotate-y="${preziList.data_rotate_y }"
				data-rotate-z="${preziList.data_rotate_z }"
				data-scale="${preziList.data_scale }">
				
				<form>
					<textarea rows="20" cols="80"></textarea>
				</form>
			</div>
		</c:forEach>  --%>
		
		<div id="slide" class="step slide" data-x="357" data-y="55">
				<p><span class="try">then you should try</span></p><h1>영석<sup>*</sup></h1><span class="footnote"><sup>*</sup> no rhyme internded</span><p></p>
		</div>
		<div id="slide" class="step slide" data-x="495" data-y="-87">
				<p>Its <strong>presentation tool</strong><br>inspired by theidea behide <a href="http://prezi.com">prezi.com</a><br>and base on the <strong>power of css3...</strong>in modern browers.</p>
		</div>
		<div id="slide" class="step slide" data-x="593" data-y="172">
				<p>visualize your <b> big</b> <span class="thoughts"></span></p>
		</div>
		<div id="slide" class="step slide" data-x="464" data-y="-237">
				<p>Editor</p>
		</div>
		<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"></div>
	</div>

	<div class="hint">
		<p>Use a spacebar or arrow keys to navigate</p>
	</div>
	<script>
		if ("ontouchstart" in document.documentElement) {
			document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
		}
	</script>


	<script src="js/impress.js"></script>
	<script>
		impress().init();
	</script>


</body>
</html>



